<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Rain CSS > loading bar</title>
<meta content="rain css,rain_css,rain css framework,rain.css,html5前端框架,前端框架,front-end,css" name="description"/>
<meta content="rain css,rain_css,rain css framework,rain.css,html5前端框架,前端框架,front-end,css" name="keywords"/>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
<style type="text/css">
.entry-title{padding: 5px;}
.entry-content img{width:70%;}
@media handheld, only screen and (max-width: 980px),only screen and (device-width: 768px){
  img{ width: 100%; margin-bottom: 5px;}
}
</style>
</head>
<body class="body">
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
  <div class="container mt hide" id="main">
    <div class="content">
      <div class="sidebar l positionR">
        <div class="sidebox p">
          <p>1, 页面图片加载进度显示</p>
          <p>2, 摇一摇控制</p>
        </div>
      </div>

      <div class="main mainRight posr">
        <a id="gameimgs" href="http://wandeme.com/haowan/category/mm/" target="_blank" class="block p">
          <img loadsrc="http://ww1.sinaimg.cn/bmiddle/005vSBqygw1ettfb9bdr1j30dw0iidi6.jpg">        
          <img loadsrc="http://ww2.sinaimg.cn/bmiddle/005vSBqygw1ettfba4n2xj30dw0iiad2.jpg">        
          <img loadsrc="http://ww1.sinaimg.cn/bmiddle/005vSBqygw1er8dk3k573j30ia0od78x.jpg">        
          <img loadsrc="http://ww1.sinaimg.cn/bmiddle/005vSBqygw1er0mpftq1yj30cr0h5gnt.jpg">
        </a>
      </div>

      <footer class="footer socialFooter c bt">
        <p class="ps">
          Maintained by the
          <a href="https://github.com/rainzhai" class="blue">RainZhai</a>
          .
        </p>
        <p class="ps">
          Code licensed under
          <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>
          , documentation under
          <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>
          .
        </p>
      </footer>
    </div>
  </div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src='js/util.js'></script>
<script type="text/javascript">
var lo = util.loading({loadingClass:'bglg'});
lo.show();
/**
 * [loadingbar 页面图片加载进度显示]
 * @param  {[string]} attr [img图片路径的属性]
 * @return {[null]} 
 */
util.loadingbar = function(opts){
        var loadsrc = opts.imgattr || "loadsrc";
        var img = $("body").find("img["+loadsrc+"]");//图片数组
        var length = img.length;//图片数量
        var downImg = 0;//已下载数量
        var percent = 0;//百分比
        for ( var i=0;i<length;i++ ){
          var imgobj = new Image();
          var imgItem = img.eq(i);
          var imgsrc = imgItem.attr(loadsrc);
          imgobj.src = imgsrc;
          if(imgobj.complete){
              imgItem.attr("src",imgsrc).removeAttr(loadsrc);//有缓存
              imgDown();
          }else{
              imgItem.attr("src",imgsrc).load(function(){
                $(this).removeAttr(loadsrc);//无缓存
                imgDown();
              })
          }
        }
        function imgDown() {
          downImg ++;
          percent = parseInt(100*downImg/length);
          lo.setContent(percent+"%");
          if ( percent == 100 ){
            if(typeof(opts.callback) =="function"){
              lo.hide();
              opts.callback();
            }
          }
        }
}
util.loadingbar({
  callback:function(){
            $("#main").show();
  }
});


  /**
 * 注册摇一摇 preview
 * @param {Function} 回调 callback
 * @return {null}
 */
util.shake = function(callback) {
    if (window.DeviceMotionEvent) {
      window.addEventListener('devicemotion', deviceMotionHandler, false);
    }
    var SHAKE_THRESHOLD = 600; 
    var end = false;
    var last_update = 0;
    var x, y, z, last_x, last_y, last_z;

    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        var diffTime = curTime - last_update;

        if (diffTime > 100) {

          last_update = curTime;

          x = acceleration.x;
          y = acceleration.y;
          z = acceleration.z;

          var xdiff = (x - last_x);
          var ydiff = (y - last_y);
          var zdiff = (z - last_z);

          var value = x + y + z;
          var lastvalue = last_x + last_y + last_z;
          var speed = Math.abs(value - lastvalue) /diffTime * 10000;

          if (speed > SHAKE_THRESHOLD) {
            callback();
            begin = false;
          }
          last_x = x;
          last_y = y;
          last_z = z;
        }
    }
  }
//摇一摇功能实现
var shake = new Audio();
shake.src = "audio/shake.mp3";
shake.load();
var shakeMath = new Audio();
shakeMath.src = "audio/shake_match.mp3";
shakeMath.load();

util.shake(function(){
      lo.show();
      setTimeout(function(){
        shake.play();
      },100);
      setTimeout(function(){
        lo.setContent("正在获取结果...");
        shakeMath.play();
        var num =  util.getRandomNum(0,5);
        if(num===0){
          $("#gameimgs").find("img").eq(0).attr("src","http://ww2.sinaimg.cn/bmiddle/005vSBqygw1ettfba4n2xj30dw0iiad2.jpg");
        }else if(num===1){
          $("#gameimgs").find("img").eq(0).attr("src","http://ww1.sinaimg.cn/bmiddle/005vSBqygw1er8dk3k573j30ia0od78x.jpg");
        }else {
          $("#gameimgs").find("img").eq(0).attr("src","http://ww1.sinaimg.cn/bmiddle/005vSBqygw1er0mpftq1yj30cr0h5gnt.jpg");
        }
        lo.hide();
      },3000);
});
</script>
</body>
</html>
